<template>
    <!--为echarts准备一个具备大小的容器dom-->
    <div class="body">
        <div style="height:150px;">
            <BreadcrumbA></BreadcrumbA>
        </div>
        <div id="info" class="info">
            <div class="condition">&emsp;{{dwValue.alias}}主菜单</div>
            <div style="width:33.3%; height:180px; float:left; border: 2px solid #c54343;"><img class="img1" :src="$store.state.images.danghui1"></div>
            <div style="width:66.7%; height:180px; float:left; border: 2px solid #c54343;">
                <p class="span_Introduction" slot="content">
                    <span id="content" style="display: block;text-indent: 2em; text-align: left; font-size: 18px; font-weight: bold;">
                        欢迎您来到{{dwValue.name}}，{{dwValue.alias}}成立于{{dwValue.createtime}}年，
                        截止目前共有{{dwValue.allpersons}}人，
                        其中党员{{dwValue.alldypersons}}人
                        (在职党员{{dwValue.dyzzperson}}人，
                        离退休党员{{dwValue.dytxperson}}人，
                        男党员{{dwValue.dymanperson}}人，
                        女党员{{dwValue.dywomanperson}}人)，
                        非正式党员{{dwValue.allfdypersons}}人
                        (预备党员{{dwValue.fdyyb}}人，
                        入党积极份子{{dwValue.fdyjj}}人，
                        重点培养对象{{dwValue.fdyzzdx}}人)。
                        <i @click="playmusic" class="ivu-icon ivu-icon-ios-megaphone" style="font-size: 19px;cursor: pointer;display: unset;"></i>
                    </span>
                </p>
            </div>
            <div style="width:100%; " >

                <div style="width:33.3%; height:120px; float:left; border: 2px solid #c54343;"  v-for="(item,index ) in dwdzbgns" :key="index">
                    <div style="float:left"><img class="img" :src="$store.state.images.dangqi"></div>
                    <div class="_div"  @click="clickTo('Menu',item.title)">{{item.title}}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapActions} from 'vuex';
    export default {
        name: '',
        data() {
            //该支部的相关配置信息
            return {
                dwValue: {},
                parent: {},
                zhubuGns: [],
                dwdzbgns:[],

                showDrawer: false,
                Collapsevalue: '0'
            }
        },
        components: {
        },
        mounted() {
            if (this.GetUser() == false) {
                this.$router.push("/");
            }
            this.GetActiveDwId_DzbId();
            this.GetZbByIdFunc();
            this.getclassify();
        },
        methods: {
            ...mapActions(['GetZbById', 'Getzbdetails', 'GetUser', 'GetActiveDwId_DzbId', 'WriteActiveDwId_DzbId','WriteActivebreadcrumb']),
            GetZbByIdFunc() {
                let _this = this;
                this.GetZbById({
                        dwid: this.$store.state.Dw_DzbID.dwid,
                        dzbid: this.$store.state.Dw_DzbID.dzbid,
                    })
                    .then(function (e) {
                        if (typeof e === "object") {
                            _this.parent = e.PostThis;
                            _this.GetzbdetailsFunc();
                            _this.WriteActivebreadcrumb({
                                name:'classify',
                                value:_this.parent.alias+'主菜单',
                                params:{
                                    dwid:_this.parent.dwid,
                                    dzbid:_this.parent.dzbid
                                }
                            })
                        }
                    });
            },
            GetzbdetailsFunc() {
                let _this = this;
                this.Getzbdetails()
                    .then(function (e) {
                        if (typeof e === "object") {
                            _this.dwValue = e;
                        }
                    })
            },
            clickTo(value,typeA) {
                this.$router.replace({
                    name: value,
                    params:{
                        typeA:typeA
                    }
                })
            },
            playmusic(src) {
                var content = document.getElementById("content").innerText;
                var url = "http://tts.baidu.com/text2audio?lan=zh&per=3&ie=UTF-8&text=" + encodeURI(content);
                console.log(url);
                var audio = new Audio(url);
                audio.src = url;
                this.$Common.musicObject.playmusic(url);
            },
            menuSelect(key, keyPath) { //菜单点击时
                this.FromIndexAndShowRight(key - 0);
                this.showfiles.Recod = "";
                this.showfiles.files = [];
            },
            getclassify(){
                let _this = this;
                let postdata={
                    type:"getclassify",
                    split:JSON.stringify({
                        dwid:this.$store.state.Dw_DzbID.dwid,
                        dzbid:this.$store.state.Dw_DzbID.dzbid,
                    })
                }
                this.$Common.AjaxPost(postdata,true)
                .then(function(e){
                    if(e.Ltabs.length>0){
                        _this.dwdzbgns=e.Ltabs;
                    }
                });
            },
        },
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }


    .img {

        margin-top: 15px;
        width: 130px;
        float: left;
    }

    .img1 {

        margin-top: 20px;
        width: 140px;
        margin-left: 30%;
    }

    ._div {
        float: left;
        line-height: 120px;
        font-size: 28px;
        font-family: cursive;
        font-weight: bold;
        text-align: center;
        width: 48%;
        cursor: pointer;

    }

    .body {
        width: 100%;
        background: url(../images/bj3.jpg) no-repeat center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 950px;

    }

    .info {
        background-color: white;
        width: 60%;
        margin-left: 20%;
        height: 574px;



        border: 2px solid #c54343;
        border-radius: 5px;
    }

    .condition {

        width: 100%;
        height: 30px;
        font-size: 16px;
        font-weight: bold;
        background-color: #c54343;
        line-height: 30px;
        color: #ffffff;
    }

    .span_Introduction {

        margin-top: 10px;
    }

    .main {

        width: 48%;
        height: 450px;
        float: left;
        margin-top: 10px;

        border: 2px solid #c54343;
    }
</style>